<template>
  <div class="tb">
    <mt-field
      label="车牌号码:"
      :placeholder="clDetail.cldcb2019001"
      type="number"
      :readonly="true"
      :disableClear="true"
    ></mt-field>
    <mt-field
      label="车牌颜色:"
      :placeholder="clDetail.cldcb2019002"
      type="number"
      :readonly="true"
      :disableClear="true"
    ></mt-field>
    <!-- 增加点击车辆类型输入框点击事件 add by qzn 20190625  -->
    <mt-field
      label="车辆类型:"
      :placeholder="clDetail.cldcb20190017"
      v-model="currentTags.name"
      type="text"
      :readonly="true"
      @click.native.capture="choseCarType('carType')"
    ></mt-field>
    <mt-field
      label="标记吨位(吨):"
      placeholder="请输入"
      type="number"
      v-model="clDetail.cldcb2019003"
      :disableClear="true"
    ></mt-field>
    <mt-field
      label="总质量(吨):"
      placeholder="请输入"
      type="number"
      v-model="clDetail.cldcb2019004"
      :disableClear="true"
    ></mt-field>
    <mt-field
      label="趟次数(次):"
      placeholder="请输入"
      type="number"
      v-model="clDetail.cldcb2019005"
      :disableClear="true"
    ></mt-field>
    <mt-field
      label="行驶里程数(公里):"
      placeholder="请输入"
      type="number"
      v-model="clDetail.cldcb2019006"
      :disableClear="true"
    ></mt-field>
    <mt-field
      label="载货里程:"
      placeholder="请输入"
      type="number"
      v-model="clDetail.cldcb2019007"
      :disableClear="true"
    ></mt-field>
    <mt-field
      label="高速公路里程:"
      placeholder="请输入"
      type="number"
      v-model="clDetail.cldcb2019008"
      :disableClear="true"
    ></mt-field>
    <mt-field
      label="货运量(吨):"
      placeholder="请输入"
      type="number"
      v-model="hyl"
      :disableClear="true"
    ></mt-field>
    <mt-field
      label="货物周转量(吨/公里):"
      placeholder="请输入"
      type="number"
      v-model="zzl"
      :disableClear="true"
    ></mt-field>
    <mt-field
      label="平均运距(公里):"
      placeholder="请输入"
      type="number"
      v-model="pjyj"
      :disableClear="true"
    ></mt-field>
    <mt-field
      label="能耗(升/立方米/千克/千瓦时):"
      placeholder="请输入"
      type="number"
      v-model="clDetail.cldcb20190012"
      :disableClear="true"
    ></mt-field>
    <mt-field
      label="燃料类型:"
      :placeholder="clDetail.cldcb20190011"
      type="text"
      v-model="fuleTags.name"
      :readonly="true"
      :disableClear="true"
      @click.native.capture="(choseCarType('fuleType'))"
    ></mt-field>
    <!-- 新增其他燃料类型  add by qzn 20190701 -->
    <mt-field
      label="其他燃料类型:"
      placeholder="请输入"
      type="text"
      v-model="clDetail.cldcb20190018"
      :disableClear="true"
    ></mt-field>
    <!-- 新增其他燃料类型 add by qzn 2019701 end -->
    <mt-field
      label="主要货物种类:"
      :placeholder="clDetail.cldcb20190013"
      type="text"
      v-model="goodsTags.name"
      :readonly="true"
      :disableClear="true"
      @click.native.capture="choseCarType('goodsType')"
    ></mt-field>
    <!-- 新增货物种类为9其他： add by qzn 20190701 start-->
    <mt-field
      label="其他的具体货物名称:"
      placeholder="请输入"
      type="text"
      v-model="clDetail.cldcb20190019"
      :disableClear="true"
    ></mt-field>
    <!-- 新增货物种类为9其他 add by qzn 20190701 end -->
    <div class="button">
      <mt-button type="primary" size="large" @click="commit">保存</mt-button>
    </div>
    <mt-popup
      v-model="popupVisible"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom">
      <mt-picker :slots="slots" showToolbar ref="picker" value-key="name">
        <div class="picker-toolbar-title">
          <div class="usi-btn-cancel" @click="popupVisible = !popupVisible">取消</div>
          <div class>{{message}}</div>
          <div class="usi-btn-sure" @click="handleConfig">确定</div>
        </div>
      </mt-picker>
    </mt-popup>
  </div>
</template>

<script>
import { Field } from "mint-ui";
import mui from "../../lib/mui/js/mui.min.js";
// import picker from '../../lib/mui/js/mui.picker.js'
// import popPicker from '../../lib/mui/js/mui.poppicker.js'
import { Picker } from "mint-ui";
import { Popup } from "mint-ui";
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      recid: this.$route.query.id,
      dataTypes: {}, // 保存本地车辆类型、燃料类型和货物类型数据 add by qzn 20190628
      clDetail: {
        clmlkid: "",
        datatime: "",
        floatorder: "",
        recid: "",
        reportstatus: "",
        //schemenid: "",
        //tbqy: "",
        recver: "", //
        datatime: "", //
        floatorder: "", //
        cldcb2019001: "", //
        cldcb2019002: "", //
        cldcb2019003: "", //
        cldcb2019004: "", //
        cldcb2019005: "", //
        cldcb2019006: "", //
        cldcb2019007: "", //
        cldcb2019008: "", //
        cldcb2019009: "", //
        cldcb20190010: "", //
        cldcb20190011: "", //燃料类型
        cldcb20190012: "", //
        cldcb20190013: "", //货物类型
        cldcb20190014: "", //
        cldcb20190015: "", //
        cldcb20190016: "", //
        cldcb20190017: "", //车辆类型,
        cldcb20190018: "", //其他燃料类型
        cldcb20190019: "" // 货物种类为9，其他
      },
      showToolbar: true,
      message: "请选择车辆类型",
      slots: [
        {
          values: []
        }
      ],
      popupVisible: false,
      // 保存车辆类型对象
      currentTags: {},
      // 保存燃料类型对象
      fuleTags: {},
      // 保存货物类型对象
      goodsTags: {},

      pjyj: "",
      hyl: "",
      zzl: "",
    };
  },
  watch: {
    // pjyj(newVal) {
    //    //clDetail.cldcb20190016 = this.pjyj;
    //    if(this.hyl != "" && newVal != ""){
    //       this.zzl = this.hyl * newVal;
    //    }
    // },
    hyl(newVal) {
       //clDetail.cldcb2019009 = this.hyl;
       if(newVal != "" && this.zzl != ""){
          this.pjyj = (this.zzl / newVal).toFixed(1);
       }
        
    },
    zzl(newVal) {
       //clDetail.cldcb20190015 = this.zzl;
       if(newVal != "" && this.hyl != ""){
          this.pjyj = (newVal / this.hyl).toFixed(1);
       }
    }

  },
  mounted() {
    // 加载本地数据，根据代码显示车辆类型、燃料类型和货物类型名称
      this.$http.get("http://zxdc.catsic.com:9090/sampling/json/carTyps").then(
      response => {
        console.log("数据加载成功");
        this.dataTypes = response.data;
        var rowData = JSON.parse(this.$route.query.row);
        // this.clDetail.cldcb2019001 = rowData.cldcb2019001;
        // this.clDetail.cldcb2019002 = rowData.cldcb2019002;
        // add by qzn 将默认数组全部清空 20190627
        console.log("rowData" + JSON.stringify(rowData));
        this.clDetail = rowData;
        //console.log(rowData.cldcb20190016+"rowData.cldcb20190016");
        this.pjyj = rowData.cldcb20190016 == undefined?"":rowData.cldcb20190016;
        this.hyl = rowData.cldcb2019009 == undefined?"":rowData.cldcb2019009;
        this.zzl = rowData.cldcb20190015 == undefined?"":rowData.cldcb20190015;
        // this.clDetail.schemenid = "";
        // this.clDetail.tbqy = "";
        for (let key in rowData) {
          if (key === "cldcb20190011") {
            this.dataTypes.fuleType.filter(item => {
              if (item.code === rowData[key]) {
                this.fuleTags = item;
              }
            });
          } else if (key === "cldcb20190013") {
            this.dataTypes.goodsType.filter(item => {
              if (item.code === rowData[key]) {
                this.goodsTags = item;
              }
            });
          } else if (key === "cldcb20190017") {
            this.dataTypes.carType.filter(item => {
              if (item.code === rowData[key]) {
                this.currentTags = item;
              }
            });
          }
        }
        // this.getCarDetail();
      },
      response => {
        console.log("数据加载失败");
      }
    );
  },
  
  methods: {
    getCarDetail() {
      let rowData = JSON.parse(this.$route.query.row);
      let mobileHeader = {};
      mobileHeader.recid = rowData.recid;
      mobileHeader.floatorder = rowData.floatorder;
      this.axios
        .post(
          "http://zxdc.catsic.com:9090/sampling/fill/getCldetail",
          { data: mobileHeader },
          {
            headers: {
              "Content-Type": "application/json",
              mobileHeader:
                '{"sessionId":' + localStorage.getItem("sessionId") + "}"
            }
          }
        )
        .then(
          result => {
            if (result.data.status == "1000") {
              let data = this.data.data;
              // recver
              // datatime
              // floatorder	阶数
              // cldcb2019001	车牌号码	String
              // cldcb2019002	车牌颜色	String
              // cldcb2019003	吨位（吨）	decimal
              // cldcb2019004	总质量（吨）	decimal
              // cldcb2019005	趟次数（次）	decimal
              // cldcb2019006	行驶里程（公里）	decimal
              // cldcb2019007	载货里程	decimal
              // cldcb2019008	高速公路里程	decimal
              // cldcb2019009	货运量（吨）	decimal
              // cldcb2019010	集装箱箱运量（TEU）	decimal
              // cldcb2019011	燃料类型	String
              // cldcb2019012	能耗（升、立方米、千瓦时、吨）	decimal
              // cldcb2019013	主要货物种类	String
              // cldcb2019014
              // cldcb2019015	货物周转量（吨公里）	decimal
              // cldcb2019016	平均运距（公里）	decimal
              this.clDetail.recver = data.recver;
              this.clDetail.datatime = data.datatime;
              this.clDetail.floatorder = data.floatorder;
              this.clDetail.cldcb2019001 = data.cldcb2019001;
              this.clDetail.cldcb2019002 = data.cldcb2019002;
              this.clDetail.cldcb2019003 = data.cldcb2019003;
              this.clDetail.cldcb2019004 = data.cldcb2019004;
              this.clDetail.cldcb2019005 = data.cldcb2019005;
              this.clDetail.cldcb2019006 = data.cldcb2019006;
              this.clDetail.cldcb2019007 = data.cldcb2019007;
              this.clDetail.cldcb2019008 = data.cldcb2019008;
              this.clDetail.cldcb2019009 = data.cldcb2019009;
              this.clDetail.cldcb2019010 = data.cldcb2019010;
              this.clDetail.cldcb2019011 = data.cldcb2019011;
              this.clDetail.cldcb2019012 = data.cldcb2019012;
              this.clDetail.cldcb2019013 = data.cldcb2019013;
              this.clDetail.cldcb2019014 = data.cldcb2019014;
              this.clDetail.cldcb2019015 = data.cldcb2019015;
              this.clDetail.cldcb2019016 = data.cldcb2019016;
              this.clDetail.cldcb2019017 = data.cldcb2019017;
              console.log("获取数据成功");
            }
            console.log(result);
          },
          error => {
            console.log("getCldetail request error:" + error);
          }
        );
    },
    check(){
        if(this.currentTags.name == "" || this.currentTags.name == undefined){
            Toast("车辆类型不能为空！");
        } else if(this.fuleTags.name == "" || this.fuleTags.name == undefined){
            Toast("燃料类型不能为空！");
        } else if(this.fuleTags.name == "其他" && this.clDetail.cldcb20190018 == ""){
            Toast("燃料类型为其他时，其他燃料类型名称不能为空且至少两个汉字！");
        } else if(this.fuleTags.name == "其他" && this.clDetail.cldcb20190018.length < 2){
            Toast("燃料类型为其他时，其他燃料类型名称不能为空且至少两个汉字！");
        } else if(this.fuleTags.name == "其他" && this.checkChinese(this.clDetail.cldcb20190018) < 4){
            Toast("燃料类型为其他时，其他燃料类型名称不能为空且至少两个汉字！");
        } else if(this.goodsTags.name == "其他" && this.clDetail.cldcb20190019 == ""){
            Toast("主要货物种类为其他时，其他的具体货物名称不能为空且至少两个汉字！");
        } else if(this.goodsTags.name == "其他" && this.clDetail.cldcb20190019.length < 2){
            Toast("主要货物种类为其他时，其他的具体货物名称不能为空且至少两个汉字！");
        } else if(this.goodsTags.name == "其他" && this.checkChinese(this.clDetail.cldcb20190019) < 4){
            Toast("主要货物种类为其他时，其他的具体货物名称不能为空且至少两个汉字！");
        } else {
            this.commit();
        }
    },
    checkChinese(str){
        let len = 0;
            let len1 = 0;
            for (var i = 0; i < str.length; i++) {
              let length = str.charCodeAt(i);
              if(length>=0&&length<=128) {
                len += 1;
              } else {
                len1 += 2;
              }
            }
            return len1;
    },
    commit() {
      let data = {};
      if(this.clDetail.cldcb2019001 == undefined){this.clDetail.cldcb2019001 = ""}
      if(this.clDetail.cldcb2019002 == undefined){this.clDetail.cldcb2019002 = ""}
      if(this.clDetail.cldcb2019003 == undefined){this.clDetail.cldcb2019003 = ""}
      if(this.clDetail.cldcb2019004 == undefined){this.clDetail.cldcb2019004 = ""}
      if(this.clDetail.cldcb2019005 == undefined){this.clDetail.cldcb2019005 = ""}
      if(this.clDetail.cldcb2019006 == undefined){this.clDetail.cldcb2019006 = ""}
      if(this.clDetail.cldcb2019007 == undefined){this.clDetail.cldcb2019007 = ""}
      if(this.clDetail.cldcb2019008 == undefined){this.clDetail.cldcb2019008 = ""}
      if(this.clDetail.cldcb20190010 == undefined){this.clDetail.cldcb20190010 = ""}
      if(this.clDetail.cldcb20190011 == undefined){this.clDetail.cldcb20190011 = ""}
      if(this.clDetail.cldcb20190012 == undefined){this.clDetail.cldcb20190012 = ""}
      if(this.clDetail.cldcb20190013 == undefined){this.clDetail.cldcb20190013 = ""}
      if(this.clDetail.cldcb20190014 == undefined){this.clDetail.cldcb20190014 = ""}   
      if(this.clDetail.cldcb20190017 == undefined){this.clDetail.cldcb20190017 = ""}
      if(this.clDetail.cldcb20190018 == undefined){this.clDetail.cldcb20190018 = ""}
      if(this.clDetail.cldcb20190019 == undefined){this.clDetail.cldcb20190019 = ""}

      this.clDetail.cldcb20190016 = this.pjyj == null?"":this.pjyj;
      this.clDetail.cldcb2019009 = this.hyl == null?"":this.hyl;
      this.clDetail.cldcb20190015 = this.zzl == null?"":this.zzl;

      if(this.clDetail.cldcb20190016 == undefined || this.clDetail.cldcb20190016 == null){this.clDetail.cldcb20190016 = ""}
      if(this.clDetail.cldcb2019009 == undefined|| this.clDetail.cldcb2019009 == null){this.clDetail.cldcb2019009 = ""}
      if(this.clDetail.cldcb20190015 == undefined|| this.clDetail.cldcb20190015 == null){this.clDetail.cldcb20190015 = ""}

      this.clDetail.cldcb2019002 = this.getCarColorCode(this.clDetail.cldcb2019002);

      data.recid = this.recid;
      data.carList = [this.clDetail];
      console.log("车辆表发送参数"+JSON.stringify(data));
      this.axios
        .post(
          "http://zxdc.catsic.com:9090/sampling/fill/saveCarsList",
          { data: data },
          {
            headers: {
              "Content-Type": "application/json",
              mobileHeader:
                '{"sessionId":' + localStorage.getItem("sessionId") + "}"
            }
          }
        )
        .then(
          result => {
            if (result.data.status == "1000") {
              console.log("保存成功");
              console.log(result);
              this.goback();
            }
          },
          error => {
            console.log("getyhcars request error:" + error);
          }
        );
    },
    goback() {
      this.$router.go(-1);
    },
    // 车辆类型、燃料类型、货物类型网格点击事件，弹出弹框 add by qzn 20190627
    choseCarType: function(choseType) {
        this.$http.get("http://zxdc.catsic.com:9090/sampling/json/carTyps").then(
        response => {
          console.log("数据加载成功");
          switch (choseType) {
            case "carType":
              this.message = "请选择车辆类型"
              this.slots[0].values = response.data.carType;
              break;
            case "fuleType":
              this.message = "请选择燃料类型"
              this.slots[0].values = response.data.fuleType;
              break;
            case "goodsType":
              this.message = "请选择货物类型"
              this.slots[0].values = response.data.goodsType;
              break;
          }
          // this.slots[0].values = response.body.carType;
          this.popupVisible = true;
        },
        response => {
          console.log("数据加载失败");
        }
      );
    },
    // 弹出框点击确定按钮点击事件 add by qzn 20190627
    handleConfig: function() {
      switch (this.$refs.picker.getValues()[0].flag) {
        case "carType":
          this.currentTags = this.$refs.picker.getValues()[0];
          this.clDetail.cldcb20190017 = this.currentTags.code;
          break;
        case "fuleType":
          this.fuleTags = this.$refs.picker.getValues()[0];
          this.clDetail.cldcb20190011 = this.fuleTags.code;
          break;
        case "goodsType":
          this.goodsTags = this.$refs.picker.getValues()[0];
          this.clDetail.cldcb20190013 = this.goodsTags.code;
          break;
      }
      this.popupVisible = false;
    },
    getCarColorCode(name) {
                  var goodsTypes = [
                    {
                      code: "1",
                      name: "蓝色"
                    },
                    {
                      code: "2",
                      name: "黄色"
                    },
                    {
                      code: "3",
                      name: "黑色"
                    },
                    {
                      code: "4",
                      name: "白色"
                    },
                    {
                      code: "5",
                      name: "黄绿"
                    },
                    {
                      code: "6",
                      name: "渐变绿"
                    },
                    {
                      code: "9",
                      name: "其他"
                    }
                  ];
                  var code = "";
                  goodsTypes.forEach(item => {
                    if (item.name === name) {
                      code = item.code;
                    }
                  });
                  return code;
              },
  }
};
</script>

<style lang="scss" scoped>
.tb {
  padding-top: 10px;
}

.mint-cell {
  background-color: #efeff4;
}
input[type="number"] {
  line-height: 21px;
  width: 100%;
  height: 40px;
  margin-bottom: 0px;
  padding: 10px 15px;
  -webkit-user-select: text;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  outline: 0;
  background-color: #fff;
  -webkit-appearance: none;
}
.button {
  padding-top: 3%;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 5%;
}
.picker-toolbar-title {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 200px;
  line-height: 40px;
  font-size: 16px;
  width: 100%;
}
.usi-btn-cancel,
.usi-btn-sure {
  color: #26a2ff;
}
.mint-popup-bottom {
  width: 100%;
  top: auto;
  right: auto;
  bottom: 0;
}
</style>